<template>
  <el-dialog
    title="新增/修改"
    :close-on-click-modal="false"
    :visible.sync="visible"
  >
    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="100px" @keyup.enter.native="dataFormSubmit()">
      <el-form-item label="公众号名称" prop="name">
        <el-input v-model="dataForm.name" placeholder="公众号名称" />
      </el-form-item>
      <div class="padding text-gray">测试号可选择服务号，不同类型账号、是否认证可使用功能权限不同，<a href="https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Explanation_of_interface_privileges.html">参考文档</a></div>
      <el-row>
        <el-col :span="12">
          <el-form-item label="公众号类型" prop="type">
            <el-select v-model="dataForm.type" placeholder="公众号类型">
              <el-option v-for="dict in dict.type.wx_account_type" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否认证" prop="verified">
            <el-switch v-model="dataForm.verified" placeholder="是否认证" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="appid" prop="appid">
        <el-input v-model="dataForm.appid" placeholder="appid" />
      </el-form-item>
      <el-form-item label="appsecret" prop="secret">
        <el-input v-model="dataForm.secret" placeholder="appsecret" />
      </el-form-item>
      <el-form-item label="token" prop="token">
        <el-input v-model="dataForm.token" placeholder="token" />
      </el-form-item>
      <el-form-item label="aesKey" prop="aesKey">
        <el-input v-model="dataForm.aesKey" placeholder="aesKey，可为空" />
      </el-form-item>
      <el-form-item label="头像" prop="img">
        <single-upload v-model="dataForm.img" style="width: 300px;display: inline-block;margin-left: 10px" />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { mapState } from 'vuex'
import SingleUpload from '@/components/Future/UploadImage/singleUpload'
import { addWxAccount } from '@/api/wx'
export default {
  dicts: ['wx_account_type'],
  components: { SingleUpload },
  data() {
    return {
      visible: false,
      dataForm: {
        appid: '',
        name: '',
        type: '2',
        verified: true,
        secret: '',
        token: 'my_weixin_token_',
        aesKey: ''
      },
      dataRule: {
        name: [
          { required: true, message: '公众号名称不能为空', trigger: 'blur' }
        ],
        appid: [
          { required: true, message: 'appid不能为空', trigger: 'blur' }
        ],
        secret: [
          { required: true, message: 'appsecret不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    init(item) {
      this.visible = true
      if (item && item.appid) {
        this.dataForm = item
        this.dataForm.type = item.type + ''
      } else {
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
        })
      }
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          addWxAccount(this.dataForm).then(response => {
            this.$modal.msgSuccess('新增成功')
            this.visible = false
            this.$emit('refreshDataList')
          })
        }
      })
    }
  }
}
</script>
